<template>

  <div>
    <van-nav-bar
        title="房间列表"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

    <van-tabs v-model:active="activeName" @change="handleTabChange" @click-tab="onClickTab" swipeable>

      <van-tab title="普通套房" name="a">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
            <van-cell v-for="room in roomList">
              <template #title>
                <div class="dv1">
                  <van-card
                      class="card"
                      tag="标签"
                      price="2.00"
                      origin-price="10.00"
                      desc="描述信息"
                      title="商品标题"
                      thumb="src/image/room4.png"
                  >
                    <template #tag v-if="room.status === 1">
                      <van-tag mark type="primary">空闲</van-tag>
                    </template>

                    <template #tag v-if="room.status === 2">
                      <van-tag mark type="warning">已预约</van-tag>
                    </template>

                    <template #price>{{'￥'+room.price}}/天</template>
                    <template #origin-price>{{(room.price)/0.8}}/天</template>
                    <template #desc>{{room.info}}<br></template>
                    <template #title>{{room.name}}<br></template>

                    <template #tags>
                      <div style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">经济</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">舒适</van-tag>
                        <van-rate v-model="room.rate" style="display: flex; justify-content: flex-end; height: 25px" allow-half readonly></van-rate>
                      </div>
                    </template>

                    <template #num>
                      <van-button style="width: 70px" size="small" v-if="room.status === 1" type="primary" @click="reserveRoom(room)">预订</van-button>
                      <van-button style="width: 70px" size="small" v-if="room.status === 2" disabled type="primary">预订</van-button>
                    </template>
                  </van-card>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>

      <van-tab title="高端套房" name="b">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
            <van-cell v-for="room in roomList">
              <template #title>
                <div class="dv1">
                  <van-card
                      class="card"
                      tag="标签"
                      price="2.00"
                      origin-price="10.00"
                      desc="描述信息"
                      title="商品标题"
                      thumb="src/image/room5.png"
                  >
                    <template #tag v-if="room.status === 1">
                      <van-tag mark type="primary">空闲</van-tag>
                    </template>
                    <template #tag v-if="room.status === 2">
                      <van-tag mark type="warning">已预约</van-tag>
                    </template>
                    <template #price>{{'￥'+room.price}}/天</template>
                    <template #origin-price>{{(room.price)/0.8}}/天</template>
                    <template #desc>{{room.info}}<br></template>
                    <template #title>{{room.name}}<br></template>

                    <template #tags>
                      <div style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">高大上</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">设备齐全</van-tag>
                        <van-rate v-model="room.rate" style="display: flex; justify-content: flex-end; height: 25px" allow-half readonly></van-rate>
                      </div>
                    </template>

                    <template #num>
                      <van-button style="width: 70px" size="small" v-if="room.status === 1" type="primary" @click="reserveRoom(room)">预订</van-button>
                      <van-button style="width: 70px" size="small" v-if="room.status === 2" disabled type="primary">预订</van-button>
                    </template>
                  </van-card>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>

      <van-tab title="豪华套房" name="c">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
            <van-cell v-for="room in roomList">
              <template #title>
                <div class="dv1">
                  <van-card
                      class="card"
                      tag="标签"
                      price="2.00"
                      origin-price="10.00"
                      desc="描述信息"
                      title="商品标题"
                      thumb="src/image/room6.png"
                  >
                    <template #tag v-if="room.status === 1">
                      <van-tag mark type="primary">空闲</van-tag>
                    </template>
                    <template #tag v-if="room.status === 2">
                      <van-tag mark type="warning">已预约</van-tag>
                    </template>
                    <template #price>{{'￥'+room.price}}/天</template>
                    <template #origin-price>{{(room.price)/0.8}}/天</template>
                    <template #desc>{{room.info}}<br></template>
                    <template #title>{{room.name}}<br></template>

                    <template #tags>
                      <div style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">奢华</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">环境好</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">贴心服务</van-tag>
                        <van-rate v-model="room.rate" style="display: flex; justify-content: flex-end; height: 25px" allow-half readonly></van-rate>
                      </div>
                    </template>

                    <template #num>
                      <van-button style="width: 70px" size="small" v-if="room.status === 1"  type="primary" @click="reserveRoom(room)">预订</van-button>
                      <van-button style="width: 70px" size="small" v-if="room.status === 2"  disabled type="primary">预订</van-button>
                    </template>
                  </van-card>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>

      <van-tab title="优惠套房" name="d">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
            <van-cell v-for="room in roomList">
              <template #title>
                <div class="dv1">
                  <van-card
                      class="card"
                      tag="标签"
                      price="2.00"
                      origin-price="10.00"
                      desc="描述信息"
                      title="商品标题"
                      thumb="src/image/room7.png"
                  >
                    <template #tag v-if="room.status === 1">
                      <van-tag mark type="primary">空闲</van-tag>
                    </template>
                    <template #tag v-if="room.status === 2">
                      <van-tag mark type="warning">已预约</van-tag>
                    </template>
                    <template #price>{{'￥'+room.price}}/天</template>
                    <template #origin-price>{{(room.price)/0.8}}/天</template>
                    <template #desc>{{room.info}}<br></template>
                    <template #title>{{room.name}}<br></template>

                    <template #tags>
                      <div style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">限时优惠</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">小礼品</van-tag>
                        <van-rate v-model="room.rate" style="display: flex; justify-content: flex-end; height: 25px" readonly allow-half></van-rate>
                      </div>
                    </template>

                    <template #num>
                      <van-button style="width: 70px" size="small" v-if="room.status === 1" type="primary" @click="reserveRoom(room)">预订</van-button>
                      <van-button style="width: 70px" size="small" v-if="room.status === 2" disabled type="primary">预订</van-button>
                    </template>
                  </van-card>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>

    </van-tabs>

    <van-popup v-model:show="popupShow" :style="{ padding: '64px' }">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </van-popup>

  </div>

</template>

<script setup>

import {onMounted, ref} from "vue";
import {showToast} from "vant";
import {get, post} from "../util/request.js";
import axios from "axios";

// 导入pinia
import {useStore} from "../pinia/index.js";
// 声明pinia
const store = useStore();

// 导入useRouter使用路由
import { useRouter } from "vue-router";
// 声明变量
const router = useRouter()

// 要传递给后端的参数
let listType = ref("");
const popupShow = ref(false);
const roomList = ref([
  {
    id:0,
    name:'',
    type:0,
    rate:0.0,
    position:'',
    status:0,
    info:'',
    price:0.0,
    utime:''
  }
])
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const back = () => {
  history.back();
}

const activeName = ref("a");
listType.value = activeName.value

const handleTabChange = (name) => {

  listType.value = name;
  onLoad();

}

const onClickTab = ({ name }) => {

  // console.log(name)
  listType.value = name;
  // console.log(listType.value);
  onLoad()

}

const showRoomList = (listType) => {

  axios({
    method:'post',
    url:'http://localhost:8081/api/hotel/room/show',
    params:{
      listType: listType
    }
  }).then((data) => {
    // 接收响应数据,data封装了响应的数据
    const res = data.data;
    // console.log("data"+JSON.stringify(res.data));
    if (res.code == 0) {
      roomList.value = res.data
    } else {
      showToast("获取失败")
    }
    // 加载状态结束
    loading.value = false;
    // 加载完毕停止加载
    finished.value = true;
  }).catch(function (){
    showToast("服务器异常")
  })

}

const onLoad = () => { // list展示时触发,用于获取数据

  setTimeout(() => {
    if (refreshing.value) {
      roomList.value = [];
      refreshing.value = false;
    }

    // 发起axios异步请求,刷新
    showRoomList(listType.value)
    // 关闭加载框
    popupShow.value = false

  }, 1000);

};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

const reserveRoom = (room) => {

  console.log("room:" + JSON.stringify(room))
  // 存入全局变量
  store.setRoom(room)

  // 跳转路由页面
  router.push("/reserveRoom")

}

onMounted( () => {
  // 显示加载框
  popupShow.value = true
})

</script>

<style scoped>

.card {
  --van-card-font-size: 15px;
  --van-card-title-line-height: 30px;
  --van-card-desc-line-height:30px;
  --van-card-thumb-size: 170px;
  --van-card-price-integer-font-size: 25px;
  --van-card-price-font-size: 20px;
  --van-card-origin-price-font-size: 14px;
  --van-card-price-color: orange;
}

.dv1 {
  text-align: left
}

</style>
